<template>
  <div class="passwordManagement p-[30px]">
    <div class="flex justify-between">
      <span class="font-bold">登录日志</span
      ><span class="name"
        ><van-icon
          name="location-o"
          class="mr-[5px]"
        />当前位置：账户安全-登录日志</span
      >
    </div>
    <el-divider />
    <!-- 上 -->
    <div class="flex items-center mt-[10px]">
      <el-avatar
        shape="square"
        :size="100"
        src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      />
      <div class="flex flex-col ml-[30px] mr-[30px]">
        <span class="name">亲爱的，下午好</span>
        <span class="val">最近登录时间：{{ userInfo.lastLoginTime }}</span>
      </div>
      <div class="home-top-item flex flex-col justify-end h-[48px] ml-[20px]">
        <el-button
          class="home-top-item-val"
          type="primary"
          text="text"
          @click="handleViewLastLoginLog"
          >查看最近记录</el-button
        >
      </div>
    </div>
    <!-- echarts -->
    <div class="chat mt-[20px] pl-[30px] pr-[30px] pb-[30px]">
      <div ref="chartRef" class="chart-container" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { useRouter } from "vue-router";
const router = useRouter();
let userInfo = ref({
  lastLoginTime: "2023-04-12 12:00:00"
});
const chartRef = ref<HTMLElement>();
let chartInstance: echarts.ECharts | null = null;

const initChart = () => {
  if (!chartRef.value) return;

  chartInstance = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "登录应用TOP5",
      left: "center",
      textStyle: {
        fontSize: 16,
        fontWeight: "bold"
      }
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      axisLabel: {
        formatter: "{value}"
      },
      splitLine: {
        lineStyle: {
          type: "dashed"
        }
      }
    },
    yAxis: {
      type: "category",
      data: [
        "教务系统",
        "离校系统移动端",
        "事务中心移动端（域名）",
        "教务系统管理端（域名）",
        "快速应用构建（外网）"
      ]
    },
    series: [
      {
        name: "登录次数",
        type: "bar",
        barWidth: "10",
        data: [896, 2151, 3060, 3562, 3725],
        itemStyle: {
          color: (params: any) => {
            const colorStops = [
              { offset: 0, color: "#a8d8ea" },
              { offset: 1, color: "#56b4e9" },
              { offset: 0, color: "#f4e188" },
              { offset: 1, color: "#f6a459" },
              { offset: 0, color: "#c3e6cb" },
              { offset: 1, color: "#7fcdbb" },
              { offset: 0, color: "#d8d8d8" },
              { offset: 1, color: "#c586d3" },
              { offset: 0, color: "#0BCCFE" },
              { offset: 1, color: "#485CFF" }
            ];
            return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: colorStops[params.dataIndex * 2].color },
              { offset: 1, color: colorStops[params.dataIndex * 2 + 1].color }
            ]);
          },
          borderRadius: [0, 4, 4, 0] // 设置边框圆角
        },
        label: {
          show: true,
          position: "right",
          color: (params: any) => {
            const topColors = [
              "#56b4e9",
              "#f6a459",
              "#7fcdbb",
              "#c586d3",
              "#485CFF"
            ];
            return topColors[params.dataIndex];
          },
          formatter: "{c}"
        }
      }
    ]
  };

  chartInstance.setOption(option);
};

const resizeChart = () => {
  chartInstance?.resize();
};

onMounted(() => {
  initChart();
  window.addEventListener("resize", resizeChart);
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose();
});

const handleViewLastLoginLog = () => {
  router.push("/safeCenter/accountSecurity/lastLoginLog");
};
</script>
<style lang="scss" scoped>
.passwordManagement {
  height: 100%;
  background-color: var(--color-main-background-secondary);
  .name {
    color: var(--color-main-text);
  }
}
.chat {
  width: 100%;
  border: 1px solid var(--el-menu-border-color);
}
.chart-container {
  width: 100%;
  height: 200px;
}
</style>
